{% block sw_landing_page_tree %}
<div class="sw-landing-page-tree">

    {% block sw_landing_page_tree_inner %}
    <sw-tree
        v-if="!isLoadingInitialData"
        ref="landingPageTree"
        class="sw-landing-page-tree__inner"
        :items="landingPages"
        :sortable="false || undefined"
        :searchable="false"
        :translation-context="translationContext"
        :on-change-route="changeLandingPage"
        :disable-context-menu="disableContextMenu"
        :allow-delete-categories="allowDelete || undefined"
        :allow-create-categories="false"
        :active-tree-item-id="landingPageId"
        @batch-delete="deleteCheckedItems"
        @delete-element="onDeleteLandingPage"
        @editing-end="syncLandingPages"
        @checked-elements-count="checkedElementsCount"
    >

        <template #headline>
            <span></span>
        </template>

        <template
            #items="{
                treeItems,
                sortable,
                draggedItem,
                newElementId,
                checkItem,
                translationContext,
                onChangeRoute,
                disableContextMenu
            }"
        >

            {% block sw_landing_page_tree_items %}
            <sw-tree-item
                v-for="item in treeItems"
                :key="item.id"
                :item="item"
                :should-show-active-state="true"
                :allow-duplicate="true"
                :allow-new-categories="false || undefined"
                :allow-delete-categories="allowDelete || undefined"
                :active="item.active"
                :translation-context="translationContext"
                :on-change-route="onChangeRoute"
                :sortable="sortable || undefined"
                :dragged-item="draggedItem"
                :disable-context-menu="disableContextMenu"
                :display-checkbox="allowEdit || undefined"
                :context-menu-tooltip-text="contextMenuTooltipText"
                :new-element-id="newElementId"
                :get-item-url="getLandingPageUrl"
                @check-item="checkItem"
            >
                <template #grip>
                    <span></span>
                </template>

                <template
                    #actions="{
                        onDuplicate,
                        onChangeRoute,
                        deleteElement,
                        toolTip
                    }"
                >
                    {% block sw_landing_page_tree_items_actions %}
                    <sw-context-button
                        v-tooltip="toolTip"
                        class="sw-tree-item__context_button"
                        :disabled="disableContextMenu || undefined"
                    >

                        {% block sw_landing_page_tree_items_actions_edit %}
                        <sw-context-menu-item @click="onChangeRoute(item)">
                            {{ $tc('global.default.edit') }}
                        </sw-context-menu-item>
                        {% endblock %}

                        {% block sw_landing_page_tree_items_actions_duplicate %}
                        <sw-context-menu-item
                            class="sw-context-menu__duplicate-action"
                            @click="onDuplicate(item)"
                        >
                            {{ $tc(`global.default.duplicate`) }}
                        </sw-context-menu-item>
                        {% endblock %}

                        {% block sw_landing_page_tree_items_actions_delete %}
                        <sw-context-menu-item
                            class="sw-context-menu__group-button-delete"
                            variant="danger"
                            @click="deleteElement(item)"
                        >
                            {{ $tc('global.default.delete') }}
                        </sw-context-menu-item>
                        {% endblock %}

                    </sw-context-button>
                    {% endblock %}

                </template>
            </sw-tree-item>
            {% endblock %}

        </template>
    </sw-tree>
    {% endblock %}

    <div v-else>
        <sw-skeleton variant="tree-item" />
        <sw-skeleton variant="tree-item" />
        <sw-skeleton variant="tree-item" />
        <sw-skeleton variant="tree-item" />
        <sw-skeleton variant="tree-item" />
        <sw-skeleton variant="tree-item" />
        <sw-skeleton variant="tree-item" />
    </div>

    {% block sw_landing_page_tree_action %}
    <div class="sw-landing-page-tree__add-button">
        <mt-button
            class="sw-landing-page-tree__add-button-button"
            size="small"
            ghost
            :disabled="disableContextMenu || !acl.can('landing_page.creator') || undefined"
            variant="secondary"
            @click="$router.push(newLandingPageUrl())"
        >
            {{ $tc('sw-landing-page.general.buttonCreate') }}
        </mt-button>
    </div>
    {% endblock %}

</div>
{% endblock %}
